<template>
  <!-- 导航菜单容器，router 表示开启路由控制，一般都要设置 -->
  <!-- 还可以可控制背景颜色，字体颜色 -->
  <el-menu router background-color="#2A3F54" text-color="#fff">
    <h1 class="aside-title">科泰购系统</h1>
    <el-row class="aside-user">
      <el-col :span="10" :offset="2">
        <!-- 头像组件，比较简单，size 表示大小，src 图片地址 -->
        <el-avatar
          :size="60"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        >
        </el-avatar>
      </el-col>
      <!-- 显示用户信息 -->
      <el-col :span="12">
        <h3>账号</h3>
        <h3>
          {{ $store.state.userStore.userInfo.loginName }}
        </h3>
      </el-col>
    </el-row>
    <!-- el-submenu 表示子菜单 -->
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-user"></i>
        <span>会员管理</span>
      </template>
      <!-- el-menu-item 表示子菜单项,index 设置为路由 path，则可以跳转 -->
      <el-menu-item index="/main/member-list">
        <i class="el-icon-user-solid"></i>
        会员列表
      </el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-s-management"></i>
        <span>新闻分类管理</span>
      </template>
      <el-menu-item index="/main/news-type-list"> 分类列表 </el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-news"></i>
        <span>新闻管理</span>
      </template>
      <el-menu-item index="/news/list"> 新闻列表 </el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/changepwd"> 修改密码 </el-menu-item>
      <el-menu-item index="/main/userlist"> 用户列表 </el-menu-item>
      <el-menu-item index="/main/menulist"> 菜单列表 </el-menu-item>
      <el-menu-item index="/main/banneritem"> 轮播图 </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "LeftMenu",
  created() {
    console.log("侧边栏:", this);
  },
};
</script>
<style>
/* 设置菜单所有标题样式文字靠左 */
.el-submenu__title {
  text-align: left;
}
.aside-title {
  color: #fff;
  font-size: 25px;
  width: 220px;
  text-align: center;
}
.aside-user {
  color: #fff;
}
.aside-user h3 {
  margin: 5px;
}
</style>
